<template>
  <div>
    <div class="vantTabs">
      <van-tabs sticky title-active-color="#fbef1a" @click="clickTitle" title-inactive-color="#191919"
                line-width="75px" line-height="2px">
        <van-tab v-for="(item,index) in taskList" :key="index">
          <template #title>{{ item[0] }}</template>
          <div class="search">
            <div class="searchpd">
              <input placeholder="任务名称" v-model.trim="page.title" />
              <p @click="query">查询</p>
            </div>
          </div>
          <div style="width: 100%;height: 147px;"></div>
          <div class="revealCon">
            <!--            <van-list-->
            <!--                v-model="loading"-->
            <!--                :finished="finished"-->
            <!--                finished-text="没有更多了"-->
            <!--                @load="onLoad"-->
            <!--            >-->
            <div class="taskconmsg" v-for="(item,index) in revealConList" :key="index">
              <router-link tag="div" :to="{path:'/assignmentDetail',query:{id:item.taskId,hidden:0}}" class="item">
                <div style="font-size: 16px;font-weight: bold;">{{ item.title }}</div>
                <ul>
                  <li>
                    <div>发布时间：</div>
                    <div class="reslut">{{ item.createTime }}</div>
                  </li>
                  <li>
                    <div>任务类型：</div>
                    <div class="reslut">{{ item.taskType }}</div>
                  </li>
                  <li>
                    <div>商务名称：</div>
                    <div class="reslut">{{ item.nickName }}</div>
                  </li>
                  <li>
                    <div>商务微信号：</div>
                    <div class="reslut">{{ item.weixin }}</div>
                  </li>
                  <li>
                    <div>状态：</div>
                    <div class="reslut">{{ item.taskStatus }}</div>
                  </li>
                  <li>
                    <div>商家名称：</div>
                    <div class="reslut">{{ item.shopName }}</div>
                  </li>
                  <li>
                    <div>商家微信号：</div>
                    <div class="reslut">{{ item.shopWeixin }}</div>
                  </li>
                  <li>
                    <div>需要人数：</div>
                    <div class="reslut">{{ item.needMan }}</div>
                  </li>
                  <li>
                    <div>本金：</div>
                    <div class="reslut">{{ item.capital }}</div>
                  </li>
                  <li>
                    <div>本金返款时间：</div>
                    <div class="reslut">{{ item.capitalReturnTime }}</div>
                  </li>
                  <li>
                    <div>佣金：</div>
                    <div class="reslut">{{ item.capital }}</div>
                  </li>
                  <li>
                    <div>佣金返款时间：</div>
                    <div class="reslut">{{ item.capitalReturnTime }}</div>
                  </li>
                  <li>
                    <div>任务要求：</div>
                    <div class="reslut">{{ item.taskDemand }}</div>
                  </li>
                  <li>
                    <div style="color: red;">申诉状态：</div>
                    <div class="reslut" style="color: red;">{{ item.taskStatus }}</div>
                  </li>
                  <li>
                    <div>是否新人可做：</div>
                    <div class="reslut">{{ item.newManDoAble }}</div>
                  </li>

                </ul>
              </router-link>
              <div class="repeatflex" v-if="item.taskStatus == '未确认' ">
                <div class="repeat" @click="clickCancelPop(item.id)">取消</div>
                <div class="colse" @click="clickAffirm(item.id)">确认</div>
              </div>
              <div class="repeatflex" v-if="item.taskStatus == '已确认' ">
                <div v-if="item.taskType == '素人秀'" class="repeat" @click="toOrdenary(item)">填写素人秀</div>
                <div v-else  class="repeat" @click="endClick(item.id)">已完结</div>
                <div class="colse" @click="clickDragMoney(item.id)">拖款</div>
              </div>
              <div class=" recover" v-if="item.taskStatus == '已取消' ">
                <div class="repeat" @click="recoverTask(item.id)">恢复任务</div>
              </div>
            </div>
            <!--            </van-list>-->
          </div>
        </van-tab>
      </van-tabs>


    </div>
    <!--        取消弹窗-->
    <div class="cancelPop" v-show="cancelPopFlag">
      <div class="cancelPopCon">
        <div class="img">
          <img :src="form.captchaImage" alt="" style="width: 100%">
        </div>
        <div>
          <van-form validate-first @failed="onFailed">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="form.verifyCode"
                name="pattern"
                placeholder="请输入"
            />
            <div class="subBut">
              <van-button round block type="info" native-type="submit" @click="cannelTask">取消任务</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <!--        确定弹窗-->
    <div class="cancelPop" v-show="affirmFlag" @click.self="affirmHid">
      <div class="cancelPopCon">
        <div class="confirmPop">
          <van-form validate-first @failed="affirmOnFailed">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="sureCapital"
                name="pattern"
                label="本金金额"
                placeholder="请输入"
            />
            <div class="subBut">
              <van-button round block type="info" native-type="submit" @click="sureTask">确定</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <!--    拖款弹窗-->
    <div class="cancelPop" v-show="dragMoneyFlag" @click.self="dragMoney">
      <div class="cancelPopCon">
        <div class="confirmPop">
          <van-form validate-first @failed="affirmOnFailed">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
                v-model="appealForm.weixinOrQq"
                name="pattern"
                label="你的微信或QQ"
                placeholder="请输入"

            />
            <van-field
                v-model="appealForm.question"
                name="pattern"
                label="单子问题"
                placeholder="请输入"
            />
            <div class="subBut2">
              <van-button round block type="info" native-type="submit2" @click="appealClick">确定</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <div style="height: 50px;width: 100%"></div>
    <!--        底部导航栏-->
    <foot-nav></foot-nav>
  </div>
</template>

<script>
import footNav from "../components/base/tabbar.vue"
import myTaskApi from "@/api/myTask"
import comApi from "@/api/comapi";
import {Toast} from "vant";

export default {
  name: "assignment",
  data() {
    return {
      sureCapital: '',//确认本金
      id: '', // 当前id
      value1: '',
      count: 0,
      loading: false,
      finished: false,
      revealConList: [],
      pattern: /\d{6}/,
      cancelPopFlag: false,
      affirmFlag: false,
      taskList: [
        ['全部任务', ''],
        ['未确认', 'unSure'],
        ['已确认', 'sured'],
        ['回收站', 'cancel'],
        ['申诉中', 'appeal']],
      page: {
        title:'',
        pageNo: 1,
        pageSize: 30,
        taskStatus: '',
        query: ''
      },
      form: {
        captchaImage: '',
        key: '',
        verifyCode: ''
      },
      appealForm: {
        weixinOrQq:'',
        question:''
      },
      dragMoney1: '',
      dragMoney2: '',
      dragMoneyFlag: false,

    }
  },
  created() {
    this.myTaskLoad()
  },
  methods: {
    query(){
      this.page.pageNo=1
      this.myTaskLoad()
    },
    toOrdenary(item){
      this.$router.push({path:'/ordinaryTable',query: {id:item.id,busName:item.nickName,shopName:item.shopName}})
    },
    captcha() {
      comApi.getCaptcha().then(res => {
        this.form.captchaImage = res.data.captchaImage
        this.form.key = res.data.key
      })
    },

    myTaskLoad() {
      myTaskApi.taskList(this.page).then(res => {
        this.revealConList = res.data.records
      })
    },
    clickTitle(name) {
      if (name == 1) {
        // this.repeatflexFlag = true
        // this.taskconFlag =false
      } else {
        // this.repeatflexFlag = false
        // this.taskconFlag = true
      }
      this.revealConList = []
      this.page.pageNo = 1
      this.page.taskStatus = this.taskList[name][1]
      this.myTaskLoad()
    },

    onLoad() {
      // 异步更新数据

      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.revealConList.push(this.revealConList.length + 1);
      //   }
      //   // 加载状态结束
      //   this.loading = false;
      //   // 数据全部加载完成
      //   if (this.revealConList.length >= 60) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
      this.cancelPopFlag = false
    },
    affirmOnFailed(errorInfo) {
      // var _this = this;
      // ev.stopPropagation();
      console.log('failed', errorInfo);
      // this.affirmFlag = false
    },
    //点击取消弹窗
    clickCancelPop(id) {
      this.cancelPopFlag = true
      this.id = id
      this.form.verifyCode = ''
      this.captcha()

    },
    //点击确定弹窗
    clickAffirm(id) {
      this.affirmFlag = true
      this.id = id
      this.sureCapital = ''
    },
    affirmHid() {

      this.affirmFlag = false
    },
    // 拖款点击
    clickDragMoney(id) {
      this.dragMoneyFlag = true
      this.id = id
      this.appealForm.weixinOrQq = ''
      this.appealForm.question = ''
    },
    dragMoney() {
      this.dragMoneyFlag = false
    },
    cannelTask() {
      if (this.form.verifyCode == '') {
        Toast('取消失败')
        this.cancelPopFlag = false
        return
      }
      let json = {
        id: this.id,
        key: this.form.key,
        verifyCode: this.form.verifyCode
      }
      // debugger
      myTaskApi.cannelMyTask(json).then(res => {
        Toast(res.message)
        this.myTaskLoad()
      })
      this.cancelPopFlag = false
    },
    sureTask(){
      if (this.sureCapital == '') {
        Toast('确认失败')
        this.affirmFlag = false
        return
      }
      let json = {
        id:this.id,
        sureCapital:this.sureCapital
      }
      myTaskApi.sureMyTask(json).then(res=>{
        Toast(res.message)
        this.myTaskLoad()
      })
      this.affirmFlag = false
    },
    endClick(id){
      let json = {id:id}
      myTaskApi.endMyTask(json).then(res=>{
        Toast(res.message)
        this.myTaskLoad()
      })
    },
    appealClick(){
      if (!(this.appealForm.weixinOrQq.length > 0 && this.appealForm.weixinOrQq.length <= 20)) {
        Toast("微信或qq格式错误")
        return
      }
      if (!(this.appealForm.question.length> 0 && this.appealForm.question.length <= 400)) {
        Toast("问题格式错误")
        return
      }
      this.appealForm.id = this.id
      myTaskApi.appealTask(this.appealForm).then(res=>{
        Toast(res.message)
        this.myTaskLoad()
      })
      this.dragMoneyFlag =false
    },
    recoverTask(id) {
      let json = {id:id}
      myTaskApi.recoverTask(json).then(res=>{
        Toast(res.message)
        this.myTaskLoad()
      })
    }
  },

  components: {
    footNav
  },
}
</script>

<style lang="less" scoped>
.vantTabs {
  width: 100%;

  /deep/ .van-sticky {
    width: 100%;
    position: fixed;
    top: 80px;
    left: 0;
  }

  /deep/ .van-tab {
    font-size: 16px;
    width: 75px;
    padding: 0;
    flex: none;
    -webkit-box-flex: none;
    -webkit-flex: none;
  }

  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 60px;
  }

  /deep/ .van-tabs__line {
    background: #f8f5be;
  }

  .search {
    width: 100%;
    background: white;
    position: fixed;
    top: 0px;
    left: 0;

    .searchpd {
      padding: 50px 10px 10px 10px;
      display: flex;
      align-items: center;

      input {
        flex: 1;
        text-indent: 20px;
        background: #f4f4f4;
        border-radius: 5px;
        height: 30px;
        line-height: 30px;
      }

    }
  }

  .revealCon {
    width: 100%;

    .taskconmsg {
      width: 96.5%;
      margin: 0 auto;

      /deep/ .van-field__label {
        width: 7.2em;
      }

      .item {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #d1d1d1;
        background: #f7fbfe;
        margin-bottom: 5px;

        ul {
          width: 100%;

          li {
            display: flex;
            justify-content: space-between;
            padding: 3px 0;
            align-items: center;
            font-size: 12px;
            color: #727271;

            :nth-child(1) {
              font-weight: 700;
              color: black;
            }

            .reslut {
              color: black;
            }
          }
        }
      }

      .recover {
        margin-bottom: 5px;
        color: white;
        padding-bottom: 20px;

        .repeat {
          background: #abdbe7;
          text-align: center;
          padding: 5px 0;
        }
      }

      .repeatflex {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        color: white;
        padding-bottom: 20px;

        div {
          width: 49.8%;
          text-align: center;
          padding: 5px 0;
        }

        .repeat {
          background: #abdbe7;
        }

        .colse {
          background: #f8f5be;
        }
      }
    }
  }
}

.cancelPop {
  /deep/ .van-form {
    width: 300px;
    margin: 0 auto;

  }

  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;

  .cancelPopCon {
    position: relative;
    top: 200px;
    left: 0;

    .img {
      width: 240px;
      height: 72px;
      margin: 0 auto;
      margin-bottom: 40px;

      img {
        width: 240px;
        height: 72px;
      }
    }
  }

  /deep/ .van-button--round {
    border-radius: 0px;
  }

  .confirmPop {
    width: 300px;
    background: white;
    margin: 0 auto;

    .subBut {
      margin: 10px 0;

    }
  }

}
</style>
